<template>
  <div v-html="getHtmlData" :class="$props.class" class="markdown-viewer"></div>
</template>

<script lang="ts" setup>
  import { computed,nextTick } from 'vue';
  import showdown from 'showdown';

  const converter = new showdown.Converter();
  converter.setOption('tables', true);
  const props = defineProps({
    value: { type: String },
    class: { type: String },
  });
  const getHtmlData = computed(() => converter.makeHtml(props.value || ''));
  /**
   * 设置h1-h6字体
   * @param tagName 
   */
  function setFontBoldStyle(tagName){
    let h2s = document.getElementsByTagName(tagName);
    if(h2s&&h2s.length>0) {
      for(var i=0;i<h2s.length;i++){
        let hs = h2s[i];
        hs.style.fontWeight='bold'
      }
    }
  }

  nextTick(()=> {
    setFontBoldStyle('h1');
    setFontBoldStyle('h2');
    setFontBoldStyle('h3');
    setFontBoldStyle('h4');
    setFontBoldStyle('h5');
    setFontBoldStyle('h6');
  });
</script>

<style scoped lang="less">
  .markdown-viewer {
    width: 100%;
  }
  .markdown-viewer{
    /deep/ ul {
      list-style: disc;
    }
    /deep/ h1{ font-size:2em; margin: .67em 0 ;}
    /deep/ h2{ font-size:1.5em; margin: .75em 0; }
    /deep/ h3{ font-size:1.17em; margin: .83em 0 }
    /deep/ h4, p,blockquote, ul,fieldset, form,ol, dl, dir,menu { margin: 1.12em 0}
    /deep/ h5 { font-size:.83em; margin: 1.5em 0 }
    /deep/ h6{ font-size:.75em; margin: 1.67em 0 }
    h1, h2, h3, h4,h5, h6, b,strong  { font-weight: bolder !important}
}
</style>
